<!-- <template>
  <div>
    <div id="bar1"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart(); // 初始化图表
  },
  methods: {
    initChart() {
      // 初始化 echarts 实例
      this.chart = this.$echarts.init(document.getElementById("bar1"));

      this.chart.setOption({
        grid: {
          containLabel: true,
          bottom: "10%",
          top: "20%",
          left: "5%",
          right: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          top: "8%",
          right: "10%",
          data: ["负荷情况"],
          itemWidth: 18,
          itemHeight: 18,
          itemGap: 30,
          textStyle: {
            fontSize: 18,
            color: "#C9D2FA",
            padding: [0, 0, 0, 10]
          }
        },
        xAxis: {
          triggerEvent: true,
          data: ["ASSY-02", "ASSY-03", "ASSY-04", "ASSY-05", "ASSY-06"],
          axisLabel: {
            interval: 0,
            show: true,
            fontSize: 18,
            color: "#C9D2FA"
          },
          axisLine: {
            show: false,
            lineStyle: {
              show: false,
              color: "#F3F3F3",
              width: 2
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitNumber: 4,
            axisLabel: {
              show: true,
              fontSize: 18,
              color: "#C9D2FA"
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#3E4A82"
              }
            }
          }
        ],
        series: [
          {
            name: "负荷情况",
            type: "liquidFill",
            silent: true,
            itemStyle: {
              color: function(params) {
                if (params.value > 110) {
                  return "#DE4646";
                } else if (params.value <= 110 && params.value >= 90) {
                  return "#2F8FFF";
                } else {
                  return "#FF932F";
                }
              }
            },
            data: [0.5], // 水固定为一半
            radius: "70%",
            label: {
              show: true,
              position: "inside",
              fontSize: 24,
              color: "#fff",
              formatter: "{c}" // 显示实际数据值
            }
          }
        ]
      });
    }
  },
  beforeDestroy() {
    // 销毁图表实例
    this.chart.dispose();
    this.chart = "";
  }
};
</script>

<style lang="scss" scoped>
#bar1 {
  width: 100%;
  height: 40vh;
}
</style> -->
